<script setup lang="ts">
import {FallOutlined, RiseOutlined} from "@ant-design/icons-vue";
import {getCurrentInstance} from "vue";
import McMqChart from "~/contentScripts/views/sycm/mc_mq_overview/McMqChart.vue";
import McMqTable from "~/contentScripts/views/sycm/mc_mq_overview/McMqTable.vue";
import Trans from "~/utils/sycm/trans";
// 市场-市场大盘-行业趋势
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import SYCM from "~/utils/ali/sycm";

const loginVisible = ref(false);
const visible = ref(false);
const data = ref<any[]>([]);
const currData = ref<any>(null);
const childTabActiveKey = ref('');
const currDate = ref<string>('');
const currType = ref<string>('');
const currCate = ref<string>('');
const showZs = ref<boolean>(false);
const nameIndex = [
  {
    realName: '搜索人气',
    transName: '搜索人数',
  },
  {
    realName: '搜索热度',
    transName: '搜索次数',
  },
  {
    realName: '访问人气',
    transName: '访问人数',
  },
  {
    realName: '浏览热度',
    transName: '浏览量',
  },
  {
    realName: '收藏人气',
    transName: '收藏人数',
  },
  {
    realName: '收藏热度',
    transName: '收藏次数',
  },
  {
    realName: '加购人气',
    transName: '加购人数',
  },
  {
    realName: '加购热度',
    transName: '加购次数',
  },
  {
    realName: '客群指数',
    transName: '支付买家数',
  },
  {
    realName: '交易指数',
    transName: '交易金额',
  },
];
nameIndex.map((item: any) => {
  item.name1 = item.name;
  item.name = nameIndex[item.name];
});
const changeTab = (item: any) => {
  document.querySelectorAll('#sycm-mc-mq-cate-trend > div.oui-card-content.alife-one-design-sycm-indexes-trend-card-content > div > div.alife-one-design-sycm-indexes-trend-index-container div.alife-one-design-sycm-indexes-trend-index-item-multiple-line-selectable')[item.index]?.click()
}
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    }
  }, __option)) {
    await calcActive();
    visible.value = true;
    // let _data: any = await SYCM.getInternalFiberData('#sycm-mc-mq-cate-trend > div.oui-card-content.alife-one-design-sycm-indexes-trend-card-content > div > div.alife-one-design-sycm-indexes-trend-index-container > div > div', 'memoizedProps.children');
  }
}
const calcActive = async () => {
  let elements = document.querySelectorAll('#sycm-mc-mq-cate-trend > div.oui-card-content.alife-one-design-sycm-indexes-trend-card-content > div > div.alife-one-design-sycm-indexes-trend-index-container div.alife-one-design-sycm-indexes-trend-index-item-multiple-line-selectable');
  if (elements) {
    elements.forEach((item: any, key) => {
      if (typeof data.value[key] != 'undefined') {
        data.value[key].active = item.className.indexOf('active') > -1;
      }
    })
  }
  let curr = data.value.find((item: any) => {
    if (item.active) {
      childTabActiveKey.value = item.key;
    }
    return item.active;
  })
  let treedData = (await SYCM.getInternalFiberData('#sycm-mc-mq-cate-trend > div.oui-card-content.alife-one-design-sycm-indexes-trend-card-content > div > div.alife-one-design-sycm-indexes-trend-chart-container > .alife-one-design-sycm-indexes-trend-chart-container-trend > div', 'memoizedProps.children.props'));
  if (treedData && typeof treedData.indexList != 'undefined' && typeof treedData.data != 'undefined') {
    treedData.tranIndexList = treedData.indexList.map((item) => {
      let _item = {...item};
      let tran = nameIndex.find((item2: any) => {
        return item.text.indexOf(item2.realName) > -1;
      });
      if (tran) {
        _item.text = item.text.replaceAll(tran.realName, tran.transName);
      }
      return _item;
    });
    treedData.tranData = {};
    for (let dataKey in treedData.data) {
      treedData.tranData[dataKey] = treedData.data[dataKey].map((item: any) => {
        return Trans.number(item);
      });
    }
  } else {
    treedData = null;
  }
  if (treedData != null) {
    if (curr.treedData) {
      if (JSON.stringify(curr.treedData) != JSON.stringify(treedData)) {
        curr.treedData = treedData;
      }
    }else {
      curr.treedData = treedData;
    }
  }else {
    curr.treedData = null;
  }
  return currData.value = curr;
}
let timer: any = null;
onMounted(() => {
  timer = setInterval(async () => {
    let type: string = document.querySelector("#sycm-mc-mq-cate-trend > div.oui-card-header-wrapper > div.cardHeader.oui-card-header > div.oui-card-header-item.oui-card-header-item-pull-right > div > span > span.oui-card-switch-item-container.oui-card-switch-item-container-active > span.oui-card-switch-item.oui-card-switch-item-active")?.innerHTML;
    let date: string = document.querySelector("div.oui-date-picker-current-date")?.innerHTML.replaceAll('统计时间 ', '');
    let cate: string = document.querySelector("[id^=__qiankun_microapp_wrapper_for_op_mc] > div > div > div > div > div.ebase-FaCommonFilter-module__root > div > div > div > div > div.ebase-FaCommonFilter-module__top > div.ebase-FaCommonFilter-module__left > div:nth-child(1) > div > a")?.title;
    if (date != currDate.value || data.value.length == 0 || type != currType.value || cate != currCate.value) {
      data.value = [];
      currDate.value = date;
      currType.value = type;
      currCate.value = cate;
      let _data = await SYCM.getInternalFiberData('#sycm-mc-mq-cate-trend > div.oui-card-content.alife-one-design-sycm-indexes-trend-card-content > div > div.alife-one-design-sycm-indexes-trend-index-container > div > div', 'memoizedProps.children');
      if (_data) {
        let index = 0;
        _data.map((item: any) => {
          data.value.push(...item.props.children.map((_t: any) => {
            return {
              index: index++,
              key: _t.props.children[0].props.value,
              name: _t.props.children[0].props.text,
              tranName: nameIndex.find((item: any) => {
                return item.realName == _t.props.children[0].props.text;
              })?.transName,
              tranFunc: Trans.number,
              numberValue: _t.props.children[0].props.numberValue,
              subIndexes: _t.props.children[0].props.subIndexes,
              active: false,
              treedData: null,
            }
          }));
        });
      }
    } else {
      await calcActive();
    }
  }, 300);
})
onUnmounted(() => {
  clearInterval(timer);
});
</script>

<template>
  <base-app>
    <a-button-group>
      <user @login="loginVisible=true" :style="{
      marginRight: '0'
    }"
      />
      <!--      <a-button type="primary" size="small" @click="handle2">指数换算</a-button>-->
      <a-button type="primary" size="small" @click="handle">一键转化</a-button>
    </a-button-group>
    <custom-modal width="95%" title="市场-市场大盘-行业趋势" style="top:20px;" v-model:visible="visible" :footer="null">
      <template #headerRight>
        <a-switch v-model:checked="showZs" size="small"/>
        <span style="padding-left: 5px;">显示指数</span>
      </template>
      <a-row :gutter="10" class="child-tab">
        <a-col :span="4" v-for="(tab,k) in data">
          <div class="child-tab-item" :class="{
                  active: childTabActiveKey==tab.key,
                  dashed: tab.treedData==null,
                }" @click="()=>changeTab(tab)"
          >
            <h4>{{ showZs ? tab.name : tab.tranName }}</h4>
            <!--            <h2 v-if="tab.format=='.2%'">{{ tab.numberValue.toFixed(2) }}%</h2>-->
            <!--            <h2 v-else-if="tab.format.indexOf('.2f')">{{ tab.numberValue.toFixed(2) }}</h2>-->
            <h2>{{ showZs ? tab.numberValue : tab.tranFunc(tab.numberValue) }}</h2>
            <a-row type="flex" class="bottom">
              <a-col flex="1">
                {{ tab.subIndexes[0].text }}
              </a-col>
              <a-col>
                <template v-if="tab.subIndexes[0].numberValue">
                  <div v-if="tab.subIndexes[0].numberValue>0" class="blue">
                    +{{ (tab.subIndexes[0].numberValue * 100).toFixed(2) }}%
                    <RiseOutlined/>
                  </div>
                  <div v-else-if="tab.subIndexes[0].numberValue<0" class="red">
                    {{ (tab.subIndexes[0].numberValue * 100).toFixed(2) }}%
                    <FallOutlined/>
                  </div>
                </template>
                <template v-else>
                  --
                </template>
              </a-col>
            </a-row>
          </div>

        </a-col>
      </a-row>
      <McMqChart :title="showZs?currData.name:currData.tranName" :show-zs="showZs" :treed-data="currData?.treedData"/>
      <a-divider/>
      <McMqTable :data="data" :show-zs="showZs"/>
    </custom-modal>

    <user-login-modal v-model:visible="loginVisible" @close="loginVisible=false"/>
  </base-app>
</template>

<style lang="less" scoped>
.child-tab-item {
  border: 2px solid #eee;
  padding: 7px 14px;
  border-radius: 5px;
  margin-bottom: 10px;
  cursor: pointer;

  &.dashed {
    border-style: dashed;
  }

  &:hover, &.active {
    border-color: #1890ff;
  }

  .bottom {
    color: #666;
    font-size: 12px;

    .blue {
      color: #1890ff;
    }

    .red {
      color: #f5222d;
    }
  }
}
</style>
